<template>
  <div class="asset-evaluation-page">
<GlobalHeader></GlobalHeader>
    <section class="hero-section">
      <video
          class="hero-background"
          src="/src/assets/videos/back.mp4" autoplay
          loop
          muted
      ></video>
      <div class="hero-content">
        <h1 style="color: black">电力装备剩余价值评估解决方案</h1>

        <p style="color: black;text-align: left">
             对电力装备进行全面分类分级盘点，详细评估每件电力装备电气性能、机械性能、装配工艺等状态，根据评估结果，提供专业电力装备运营建议方案，包括运营建议价格、是否废旧处置、再利用、再制造、直接使用等，为电网企业资源利用提供参考依据。
        </p>
      </div>
    </section>


    <AssetValuationHelp></AssetValuationHelp>
    <SolutionServicePlan></SolutionServicePlan>

    <AppFooter></AppFooter>
  </div>
</template>

<script setup>
import SolutionServicePlan from '@/components/Index/SolutionServicePlan.vue';
import AssetValuationHelp from "@/components/Index/AssetValuationHelp.vue";
import AppFooter from "@/components/Footer/AppFooter.vue";
import { ref, onMounted } from 'vue';

import GlobalHeader from "@/components/Index/GlobalHeader.vue";


const logoSrc = ref('');

onMounted(() => {
  // 假设你的 logo 文件名为 image_43f9de.png，并且放在 /src/assets/images/ 目录下
  // 你可能需要根据你的实际文件路径进行调整
  logoSrc.value = '/src/assets/images/image_43f9de.png';
});
</script>

<style scoped>
/* Basic structure suggestion - Requires detailed styling */

.asset-evaluation-page {
  font-family: sans-serif;
  color: #333;
}

/* Header Styles */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  /* Ensure header stays above the hero background */
  position: relative;
  z-index: 2;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  height: 70px; /* 调整 logo 的高度 */
  width: 300px;
  margin-right: 20px; /* 可选：调整 logo 和导航之间的间距 */
}

.main-nav ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

.main-nav li {
  margin-left: 25px;
}

.main-nav a {
  text-decoration: none;
  color: #555;
}
.main-nav a:hover {
  color: #4a90e2;
}

.login-button {
  background-color: #4a90e2;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

/* --- Modified Hero Section Styles --- */
.hero-section {
  padding: 80px 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 使视频填充整个容器，可能会裁剪 */
  z-index: -1;
  opacity: 0.75; /* 应用之前的透明度 */
}

.hero-content {
  max-width: 1300px;
  min-height: 600px;
  padding: 20px;
  border-radius: 8px;
  position: relative;
  color: white;
  z-index: 1;
}

.hero-content h1 {
  font-size: 4em;
  color: white;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.hero-content p {
  font-size: 1.5em;
  margin-bottom: 20px;
  color: white;
}

.hero-content h2 {
  font-size: 1.6em;
  color: white;
  margin-bottom: 25px;
  font-weight: normal;
}



/* "What it Does" Section Styles */
.what-it-does-section {
  padding: 60px 30px;
  text-align: center;
  background-color: #f8f9fa;
}

.what-it-does-section h2 {
  margin-bottom: 50px;
  font-size: 2.2em;
  color: #1a3b5d;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 35px;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-item {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.12);
}

.feature-icon {
  font-size: 1.5em;
  color: #fff;
  margin-bottom: 20px;
  width: 50px; height: 50px; background-color: #4a90e2;
  border-radius: 50%; display:flex; align-items:center; justify-content: center;
  font-weight: bold;
}

.feature-item h3 {
  margin-bottom: 15px;
  font-size: 1.3em;
  color: #1a3b5d;
}

.feature-item p {
  color: #555;
  font-size: 0.95em;
  line-height: 1.6;
}


.feature-box {
  text-align: center;
  padding: 25px;
}
.feature-box h4 {
  margin-top: 15px;
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 1.1em;
}
.feature-box .feature-icon {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  margin: 0 auto;
  width: 55px; height: 55px;
  font-size: 1.6em;
}
.feature-box a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 5px 12px;
  border-radius: 20px;
  display: inline-block;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.feature-box a:hover {
  background-color: #fff;
  color: #004a99;
}

/* Sticky Nav Styles */
.sticky-nav {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.95);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  z-index: 10;
}
.sticky-nav a {
  display: block;
  text-decoration: none;
  color: #4a90e2;
  padding: 10px 5px;
  font-size: 0.9em;
  font-weight: 600;
}
.sticky-nav a:hover {
  color: #004a99;
}
.hero-content h1 {
  font-size: 4em; /* 增大了字体大小 */
  color: white; /* 修改了颜色为蓝色 */
  text-align: center; /* 将文本居中对齐 */
  margin-bottom: 20px; /* 添加了一些底部外边距 */
  font-weight: bold; /* 加粗字体 */
  /* 你可以根据需要添加更多样式 */
}
.hero-content p {
  font-size: 1.5em; /* 增大了字体大小 */
  margin-bottom: 20px; /* 添加了一些底部外边距 */
  color: white;
}

/* --- Responsive adjustments (Example) --- */
@media (max-width: 768px) {
  .main-header {
    flex-direction: column;
    padding: 15px;
  }
  .main-nav ul {
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .main-nav li {
    margin: 5px 10px;
  }
  .login-button {
    margin-top: 10px;
  }
  .hero-section {
    padding: 40px 15px;
  }
  .hero-content h1 {
    font-size: 2em;
  }
  .hero-content h2 {
    font-size: 1.3em;
  }
  .hero-content p {
    font-size: 1em;
  }
  .what-it-does-section, .results-section, .bottom-features {
    padding: 40px 15px;
  }
  .results-section {
    flex-direction: column-reverse;
  }
}

</style>